<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Demon</title>
 
    <style>
 
        /*使轮播图弹性布局，居中设置最小高度*/
 
        body{
 
            display: flex;
 
            justify-content: center;
 
            align-items: center;
           /* 1vh 意味着值为视口高度的 1%,vh 则与设备视口的高度有关 */
            
             min-height: 200vh;
 
        }
 
        /* 定义一个图片轮播区域 */
 
        ul.slides{
 
            position: relative;
 
            width: 1000px;
 
            height: 800px;
 
            list-style: none;
 
            margin: 0;
 
            padding: 0;
 
            background-color: rgb(233, 220, 233);
 
            overflow: hidden;
 
        }
 
    /* 设置每个图片的从左往右弹性盒子排版以及水平垂直居中 */
 
        li.slide{
 
            margin: 0;
 
            padding: 0;
 
            width: inherit;
 
            height: inherit;
 
            position: absolute;
 
            top: 0;
 
            left: 0;
 
            display: flex;
 
            justify-content: center;
 
            align-items: center;
 
 
            transition: .5s transform ease-in-out;
 
        }
 
        /* 为6个li添加背景图 */
 
        .slide:nth-of-type(1){
 
            background:url(https://img0.baidu.com/it/u=3381294766,195131689&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=431../轮播图练习/img/02.png) no-repeat;
 
            background-size: cover;
 
            background-position: top;
 
        }
 
        .slide:nth-of-type(2){
 
            background:url(https://img0.baidu.com/it/u=823386591,369879760&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500) no-repeat;
 
            background-size: cover;
 
            background-position: top;
 
            left: 100%;
 
        }
 
        .slide:nth-of-type(3){
 
            background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F64%2Fb5%2F01%2F64b501e24725216348a16882cbe7c37d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654409446&t=bfa2b2d970edfa11dbd287922321b7e1) no-repeat;
 
            background-size: cover;
 
            background-position: top;
 
            left: 200%;
 
        }
 
        .slide:nth-of-type(4){
 
            background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F01%2F210924164A450X-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654409493&t=4248319fd3d320135d77b702375b7473) no-repeat;
 
            background-size: cover;
 
            background-position: top;
 
            left: 300%;
 
        }
 
        .slide:nth-of-type(5){
 
            background:url(https://img0.baidu.com/it/u=832275203,422748669&fm=253&fmt=auto&app=138&f=JPEG?w=684&h=500) no-repeat;
 
            background-size: cover;
 
            background-position: top;
 
            left: 400%;
 
        }
 
        .slide:nth-of-type(6){
 
            background:url(https://pics2.baidu.com/feed/10dfa9ec8a1363279514a10c1bd8f4ea09fac7f6.jpeg?token=7e334649620e7609e5f85544dd03fe96&s=7989B7576E5066CCD8259D6A0300E061) no-repeat;
 
            background-size: cover;
 
            background-position: top;
 
            left: 500%;
 
        }
 
       
 
        input[type="radio"]{
 
            position: relative;
 
            z-index: 100;
 
            display: none;
 
        }
 
       
 
        .controls-visible{
 
            position: absolute;
 
            width: 100%;
 
            bottom: 12px;
 
            text-align: center;
 
        }
 
      
 
        .controls-visible  label{
 
            display: inline-block;
 
            width: 20px;
 
            height: 20px;
 
            border-radius: 50%;
 
            background-color: rgb(178, 145, 145);
 
            margin: 0 5px;
 
            border: 2px solid #fff;
 
        }
 
 
        .slides input[type="radio"]:nth-of-type(1):checked~
 
        .controls-visible label:nth-of-type(1)
 
        {
 
            background-color: #333;
 
        }
 
        .slides input[type="radio"]:nth-of-type(2):checked~
 
        .controls-visible label:nth-of-type(2)
 
        {
 
            background-color: rgb(65, 44, 186);
 
        }
 
        .slides input[type="radio"]:nth-of-type(3):checked~
 
        .controls-visible label:nth-of-type(3)
 
        {
 
            background-color:rgb(110, 226, 155);
 
        }
 
        .slides input[type="radio"]:nth-of-type(4):checked~
 
        .controls-visible label:nth-of-type(4)
 
        {
 
            background-color: rgb(221, 104, 123);
 
        }
 
        .slides input[type="radio"]:nth-of-type(5):checked~
 
        .controls-visible label:nth-of-type(5)
 
        {
 
            background-color: #333;
 
        }
 
        .slides input[type="radio"]:nth-of-type(6):checked~
 
        .controls-visible label:nth-of-type(6)
 
        {
 
            background-color: rgb(150, 117, 211);
 
        }
 
      
 
 
        .slides input[type="radio"]:nth-of-type(1):checked~.slide{
 
            transform: translateX(0%);
 
        }
 
        .slides input[type="radio"]:nth-of-type(2):checked~.slide{
 
            transform: translateX(-100%);
 
        }
 
        .slides input[type="radio"]:nth-of-type(3):checked~.slide{
 
            transform: translateX(-200%);
 
        }
 
        .slides input[type="radio"]:nth-of-type(4):checked~.slide{
 
            transform: translateX(-300%);
 
        }
 
        .slides input[type="radio"]:nth-of-type(5):checked~.slide{
 
            transform: translateX(-400%);
 
        }
 
        .slides input[type="radio"]:nth-of-type(6):checked~.slide{
 
            transform: translateX(-500%);
 
        }
 
       
 
    </style>
 
</head>
 
<body>
 
   
 
    <ul class="slides">
 
     
 
        <input type="radio" id="control-1" name="control" checked>
 
        <input type="radio" id="control-2" name="control">
 
        <input type="radio" id="control-3" name="control">
 
        <input type="radio" id="control-4" name="control">
 
        <input type="radio" id="control-5" name="control">
 
        <input type="radio" id="control-6" name="control">
 
       <!-- 设置处于按钮之后的同一级6个兄弟元素li -->
 
        <li class="slide"></li>
 
        <li class="slide"></li>
 
        <li class="slide"></li>
 
        <li class="slide"></li>
 
        <li class="slide"></li>
 
        <li class="slide"></li>
 
      
 
        <div class="controls-visible">
 
            <label for="control-1"></label>
 
            <label for="control-2"></label>
 
            <label for="control-3"></label>
 
            <label for="control-4"></label>
 
            <label for="control-5"></label>
 
            <label for="control-6"></label>
 
        </div>
 
    </ul>
 
</body>
 
</html>